<template>
	<view style="padding-top: 20rpx;">
		<view class="upload-license">
			<view v-if="!img" style="display: flex;align-items: center;justify-content: center;color: #ccc;"><u-icon
					name="photo" color="#cccccc" size="28"></u-icon>上传营业执照</view>
			<image v-else :src="img" style="width: 440rpx;height: 290rpx;" mode=""></image>
		</view>
		<view style="width: 450rpx;margin: 0 auto;">
			<u-button v-if="img" type="primary" text="重新上传" @tap="upload"></u-button>
			<u-button v-else text="上传营业执照" @tap="upload"></u-button>
		</view>
		<view style="text-align: center;line-height: 60rpx;color: #f00;font-size: 26rpx;">*jpg或png格式的文件，小于50M</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: ''
			}
		},
		methods: {
			upload() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://lk.ccfqkj.com/api/user.v1_0.upload/image',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('usertoken'),
							},
							success: (uploadFileRes) => {
								this.img = JSON.parse(uploadFileRes.data).data.url;
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload-license {
		width: 450rpx;
		height: 300rpx;
		border: 4rpx dashed #ccc;
		border-radius: 10rpx;
		margin: 0 auto;
		line-height: 300rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.upload-license image {
		border-radius: 10rpx;
	}
</style>